<template>
  <v3-waterfall
    ref="waterfall"
    :list="blocks"
    srcKey="url"
    :colWidth="colWidth"
    :gap="10"
    :bottomGap="0"
    :distanceToScroll="distanceToScroll"
    :isOver="isOver"
    :isLoading="isLoading"
    :isMounted="isMounted"
    @scrollReachBottom="getMoreImg"
    :scrollBodySelector="scrollBodySelector"
  >
    <template v-slot:default="slotProp">
      <div>
        <div
          class="item f-d-c"
          @click="blocksCLick(slotProp.raw)"
          v-if="slotProp.raw"
        >
          <div class="item-container">
            <div class="dujiang" v-if="slotProp.raw.isExclusive == 1">
              <svg-icon class="dujiaitem" name="dujia"></svg-icon>
            </div>
            <div class="titleimg">
              <div class="title f-a-c" v-if="slotProp.raw.type == 1">
                <div class="titleItem f-a-c">
                  <svg-icon name="mx"></svg-icon>
                  <span>{{ sourcecheck(slotProp.raw.checkPoint, 1) }}</span>
                  <span v-if="slotProp.raw.isExamine == 0">{{
                    shenhe(slotProp.raw.isExamine)
                  }}</span>

                  <span
                    v-if="slotProp.raw.isExamine == 3"
                    style="color: #fab030"
                    >{{ shenhe(slotProp.raw.isExamine) }}</span
                  >
                </div>
              </div>

              <div class="title f-a-c" v-else>
                <div class="titleItem f-a-c">
                  <svg-icon name="tp"></svg-icon>
                  <span>{{ sourcecheck(slotProp.raw.source, 0) }}</span>
                  <span v-if="slotProp.raw.isExamine == 0">{{
                    shenhe(slotProp.raw.isExamine)
                  }}</span>

                  <span
                    v-if="slotProp.raw.isExamine == 3"
                    style="color: #fab030"
                    >{{ shenhe(slotProp.raw.isExamine) }}</span
                  >
                </div>
              </div>
            </div>
            <div style="position: relative">
              <div class="pingbioverlay" v-if="slotProp.raw.pngbiCheck">
                <span v-if="!slotProp.raw.pingbiboxCheck"
                  >请告诉我们原因为你优化推荐结果</span
                >
                <div class="liyou f-a-c" v-if="!slotProp.raw.pingbiboxCheck">
                  <div
                    class="liyouitem f-j-a-c f-a-c"
                    v-for="(item, index) in shieldList"
                    :key="index"
                    @click.stop="shieldListClick(slotProp.raw, index)"
                  >
                    <span>{{ item.title }}</span>
                  </div>
                </div>
                <span v-if="slotProp.raw.pingbiboxCheck"
                  >已收到你的反馈，将为你优化推荐结果</span
                >

                <span
                  v-if="slotProp.raw.pingbiboxCheck"
                  class="quxiaoButton click"
                  @click.stop="quxiaopingbi(slotProp.raw, index)"
                  >取消屏蔽</span
                >
              </div>

              <img
                class="imgss"
                v-if="slotProp.raw.data[0] && slotProp.raw.type == 0"
                :src="
                  slotProp.raw.url +
                  '?x-oss-process=image/resize,w_600/format,webp'
                "
                alt=""
              />
              <img
                class="imgss"
                v-else
                :src="
                  slotProp.raw.url +
                  '?x-oss-process=image/resize,w_600/format,webp'
                "
                alt=""
              />
            </div>

            <div class="overlay" v-if="!slotProp.raw.pngbiCheck">
              <div class="userimg f-a-c f-j-sb-a-c" v-if="slotProp.raw.miniData">
                <userAvatar
                  :userImgs="
                    slotProp.raw.miniData.user_avatar +
                    '?x-oss-process=image/resize,w_600/format,webp'
                  "
                  :showDv="
                    userType === ''
                      ? slotProp.raw.staus == 1
                      : userInfo.staus == 1
                  "
                  :divWidth="34"
                  :imgWidth="30"
                  :marginLeft="10"
                  :dvWidht="12"
                  :dvBottom="0"
                ></userAvatar>

                <!-- <img
                  :src="slotProp.raw.userImgs ? slotProp.raw.userImgs : imgtou"
                  alt=""
                /> -->
                <svg-icon
                  class="svgxinbiao"
                  name="icon-dav"
                  style="width: 14px; height: 14px"
                  v-if="slotProp.raw.miniData.is_authentication == 1"
                ></svg-icon>

                <div class="gongneng f-a-c">
                  <div
                    class="gognitem f-j-a-c"
                    v-if="biaoType == 0 && slotProp.raw.collect == 0"
                    @click.stop="getcollect(slotProp.raw)"
                  >
                    <svg-icon name="icon-jihe"></svg-icon>
                  </div>
                  <div
                    class="gognitem f-j-a-c"
                    v-else-if="biaoType == 0"
                    @click.stop="quxiaoCollect(slotProp.raw)"
                  >
                    <svg-icon name="icon-jihe-yx"></svg-icon>
                  </div>

                  <div
                    class="gognitem f-j-a-c"
                    v-if="biaoType == 0 && slotProp.raw.like == 0"
                    @click.stop="getlike(slotProp.raw)"
                  >
                    <svg-icon name="icon-xihuan"></svg-icon>
                  </div>

                  <div
                    class="gognitem f-j-a-c"
                    v-else-if="biaoType == 0"
                    @click.stop="quxiaodianzan(slotProp.raw)"
                  >
                    <svg-icon name="icon-xihuan-yx"></svg-icon>
                  </div>

                  <el-dropdown>
                    <div
                      class="gognitem f-j-a-c"
                      v-if="biaoType == 0"
                      @click.stop="more"
                    >
                      <img src="../../../assets/image/icon-gd@2x.png" alt="" />
                    </div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          v-for="(item, index) in jubaoList"
                          :key="index"
                          @click="jubaoLICK(slotProp.raw, index)"
                        >
                          <svg-icon
                            style="margin-right: 10px"
                            :name="item.svg1"
                          ></svg-icon>
                          <span>{{ item.text }}</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  <!-- v-if="userInfo && slotProp.raw.userId == userInfo.userId" -->
                  <!-- v-if="
                      biaoType == 1 &&
                      slotProp.raw.type == 1 &&
                      slotProp.raw.isExamine != 0
                    " -->
                  <div
                    v-if="
                      biaoType == 1 &&
                      slotProp.raw.type == 1 &&
                      slotProp.raw.isExamine != 0 &&
                      userInfo &&
                      slotProp.raw.userId == userInfo.userId
                    "
                    class="gognitem f-j-a-c"
                    @click.stop="bianji(slotProp.raw)"
                  >
                    <svg-icon name="icon-bianji"></svg-icon>
                  </div>

                  <div
                    class="gognitem f-j-a-c"
                    v-if="
                      biaoType == 1 &&
                      slotProp.raw.isExamine != 0 &&
                      userInfo &&
                      slotProp.raw.userId == userInfo.userId
                    "
                    @click.stop="delmoxing(slotProp.raw)"
                  >
                    <svg-icon name="icon-trash"></svg-icon>
                  </div>
                  <!-- <el-dropdown trigger="click" @command="delmoxingClick">
                  
                    <div v-else></div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          v-for="(item, index) in versionList"
                          :key="index"
                          :command="item.id"
                          >版本 {{ index + 1 }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown> -->
                  <!-- <div class="gognitem f-j-a-c" v-if="biaoType == 1">
                    <svg-icon name="icon-bianji"></svg-icon>
                  </div> -->
                </div>
              </div>
            </div>
          </div>

          <div class="neirong f-a-c f-j-sb-a-c">
            <div class="content_title f-a-c">
              <span class="ellipsis">{{ slotProp.raw.title }}</span>
              <!-- <svg-icon
                style="margin-left: 5px"
                :name="advanceditemlist[slotProp.raw.types].svg"
                v-if="advanceditemlist[slotProp.raw.types]"
              ></svg-icon> -->
            </div>
            <div class="shuju f-a-c" v-if="slotProp.raw.type == 1">
              <!-- <span>￥{{ slotProp.raw.price }}</span> -->
              <img src="../../../assets/image/icon-download@2x.png" alt="" />
              <span>{{ slotProp.raw.downloadNum }}</span>
            </div>

            <div class="shuju f-a-c" v-if="slotProp.raw.type == 0">
              <img src="../../../assets/image/icon-xhs@2x.png" alt="" />
              <span>{{ slotProp.raw.praise }}</span>
            </div>
          </div>
          <!-- <div class="pucontent ellipsis">
            <span>{{ slotProp.raw.detail }}</span>
          </div> -->
          <!-- <div class="pingbibox"></div> -->
        </div>
      </div>
    </template>
  </v3-waterfall>

  <el-dialog
    v-model="dialogVisibleTS"
    width="480px"
    :before-close="handleClose"
    style="border-radius: 20px"
    center
    title="举报"
  >
    <div
      class="mb-2 flex items-center text-sm f-d-c"
      style="align-items: flex-end"
    >
      <el-radio-group v-model="radio1TS" class="f-a-c" style="flex-wrap: wrap">
        <el-radio
          :label="index + 1"
          size="large"
          v-for="(item, index) in TSBox"
          :key="index"
          >{{ item.title }}</el-radio
        >
      </el-radio-group>
      <div class="TSinput">
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="请留下线索，例如：该侵权内容的原创内容链接（非必填）"
          v-model="yuanying"
        ></textarea>
      </div>
      <div class="TSButton click f-j-a-c" @click="TSConfig">确认</div>
    </div>
  </el-dialog>
  <collect
    @successcollct="successcollct"
    :opentype="opentype"
    :googlistitem="googlistitem"
    :shoucanID="shoucanID"
    @opentypeclick="opentypeclick"
    :quxiaoCheck="quxiaoCheck"
    ref="collects"
  ></collect>
  <div class="jubaoinfo"></div>
</template>

<script>
import collect from "../components/collect.vue";
import nodata from "@/components/noData.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { showLoading, hideLoading } from "@/utils/loading.js";
import userAvatar from "@/components/userAvatar.vue";

let classification = [];
let kindList = [];
let software = [];
// import { classification, kindList, software } from "@/utils/advanceditem.js";
import {
  searchList,
  getdetailinfo,
  like,
  deletelike,
  likelist,
  collectModelList,
  getdetails,
  modealdel,
  moxintuku,
  complaint,
  reset,
} from "@/axios/api.js";
import comment from "./comment.vue";
import detail from "./detail.vue";
import { copyData } from "@/utils/common.js";

import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
  watch,
  onUpdated,
  onActivated,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    collect,
    detail,
    comment,
    nodata,
    userAvatar,
  },
  props: {
    userType: {
      type: [String, Number],
      default: "",
    },
    searchType: {
      type: [String, Number], // 搜索按钮全部模型图片
      default: -1,
    },
    moxingzhonglei: {
      type: [String, Number], // 模型种类
      default: -1,
    },
    dimoxuanze: {
      type: [String, Number], // 模型种类
      default: -1,
    },
    checkponiecurrent: {
      type: [String, Number], // 模型种类
      default: -1,
    },
    AdvancedsearchList: {
      type: Array, // 模型种类
      default: [],
    },
    sortid: {
      type: [String, Number], // 模型种类
      default: 1,
    },
    timeid: {
      type: [String, Number], // 时间搜索
      default: 1,
    },
    searchinput: {
      type: Boolean, // 输入框搜索判断
      default: false,
    },
    objsearch: {
      type: Object, // 输入框搜索判断
      default: {
        searchType: -1,
        dimoxuanze: -1,
        checkponiecurrent: -1,
        moxingzhonglei: -1,
        AdvancedsearchList: [],
        sortid: 0,
        timeid: 0,
      },
    },
    scrollBodySelector: {
      type: String,
      default: "",
    },
    distanceToScroll: {
      type: Number,
      default: 300,
    },
  },

  setup(props, { attrs, slots, emit }) {
    const collects = ref();
    let store = useStore();
    const { proxy } = getCurrentInstance();

    watch(
      () => props.objsearch,
      (newVal, oldVal) => {
        console.log("请求了");
        if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
          waterfall.value.reRender();
          data.page = 0;
          data.isOver = false;
          data.blocks = [];
          getmyImg();
        }
      }
      // { deep: true }
    );

    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let searchinput = computed(() => {
      return store.state.searchinput;
    });

    const scrollContainer = ref(null);
    const waterfall = ref(null);
    const handleScroll = () => {
      const { scrollHeight, scrollTop, clientHeight } = scrollContainer.value;
      if (scrollHeight - scrollTop - clientHeight <= 10) {
        loadMore();
      }
    };
    const router = useRouter();
    let data = reactive({
      loadingHtml: "",
      // pngbiCheck: false,
      modelIdJB: 0,
      yuanying: "", // 投诉原应
      TSInputContent: "",
      radio1TS: "",
      TSBox: [
        {
          title: "广告骚扰",
        },
        {
          title: "色情低俗",
        },
        {
          title: "侵犯隐私",
        },
        {
          title: "暴力画面",
        },
        {
          title: "敏感信息",
        },
        {
          title: "虚假信息",
        },
        {
          title: "版权抄袭",
        },
        {
          title: "其他原因",
        },
      ],
      dialogVisibleTS: false,
      shieldList: [
        {
          title: "内容不感兴趣",
        },
        {
          title: "对作者不感兴趣",
        },
        {
          title: "图片画质差",
        },
        {
          title: "其他",
        },
      ],
      jubaoList: [
        {
          svg: "icon-fenxiang",
          svg1: "icon-fenxiang-yx",
          text: "分享复制链接",
        },

        {
          svg: "icon-yc-wx",
          svg1: "icon-yc",
          text: "隐藏此内容",
        },
        {
          svg: "icon-jubao-wx",
          svg1: "icon-jubaos",

          text: "举报该内容",
        },
      ],
      versionList: [],
      colWidth: 280,
      collectid: 0,
      quxiaoCheck: false,
      googlistitem: 0, // 收藏id
      opentype: false,
      titleCheck: false,
      imgtou: new URL("../../../assets/image/tx@2x.png", import.meta.url),
      blocks: [],
      over: false,
      direction: "btt",
      drawer: false,
      dataLoaded: false,
      page: 0,
      isMounted: false, //父元素是否挂在完成
      isLoading: true, //loading
      isOver: false, //是否没有更多
      limit: 40, //分页数量
      advanceditemlist: [],
      compileType: 0,
      types: 0,
      phone: "",
      scrollContainer: "",
      totals: "",
      adddialogVisible: false, // 添加收藏夹
      dialogVisible: false, // 收藏夹开关
      biaoType: 0, // 判断是否是隐藏
      shoucanID: 0,
    });
    let sourceser = (val) => {
      let typeval;
      if (val && val == 0) {
        typeval = "SD";
      }
      return typeval;
    };

    // 搜索框
    watch(
      () => searchinput.value,
      (newVal, oldVal) => {
        if (newVal) {
          if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
            data.titleCheck = true;
            data.page = 0;
            data.isOver = false;
            data.blocks = [];
            getmyImg();
          }
        }
      }
    );
    // 监听userType
    watch(
      () => props.userType,
      (newVal, oldVal) => {
        waterfall.value.reRender();
        if (newVal == 1) {
          data.blocks = [];
          data.page = 0;
          data.isOver = false;
          getinfo();
        }
        if (newVal == 4) {
        }
        console.log(newVal, "newValnewValnewVal");
        if (newVal == 6) {
          data.isOver = false;
          data.blocks = [];
          data.page = 0;
          imagetuku();
        }
        // if (newVal == 5) {
        //   // data.isOver = false;
        //   // data.blocks = [];
        //   // data.page = 0;
        //   // imagetuku();
        // }
        if (newVal == 3) {
          data.isOver = false;
          data.blocks = [];
          data.page = 0;
          getlikelist();
        }
      },
      {
        deep: true,
      }
    );
    // 收藏夹列表
    let collectlistget = () => {
      console.log(data.types);
      if (!data.isOver) {
        data.page += 1;
      } else {
        return;
      }
      data.isLoading = true;
      collectModelList({
        page: data.page,
        limit: data.limit,
        phone: data.types == 1 ? userInfo.value.userId : data.phone || "",
        collectId: data.collectid,
      }).then((res) => {
        // data.totals = res.data.total
        data.isLoading = false;
        let datalist = res.data.records;
        data.isOver = datalist.length < data.limit;
        datalist.forEach((item) => {
          if (item.data[0] && item.type == 0) {
            item.url = item.data[0].url;
          } else {
            item.url = item.indexImgs.data ? item.indexImgs.data[0].url : "";
          }
        });
        emit("totalslist", res.data.total);

        if (res.data.records) {
          if (data.page == 1) data.blocks = [];
          data.blocks = data.blocks.concat(datalist);
          data.blocks = [...data.blocks];
        } else {
          data.isOver = true;
        }
      });
    };
    // 删除模型/图片
    let delmoxing = async (item) => {
      // delmoxingClick();
      // console.log(item);
      // if (item.type == 0) {
      //   delmoxingClick(item.id);
      // } else {
      if (props.userType == 4) {
        quxiaoCollect(item);
        return;
      }
      await getdetailslist(item.id);
      delmoxingClick(item);
      // }
    };
    let delmoxingClick = (item) => {
      ElMessageBox.confirm("确认删除该项目吗", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          shanchu(item);
        })
        .catch(() => {});
    };
    // 取消屏蔽
    let quxiaopingbi = (item, index) => {
      item.pngbiCheck = false;
      reset({ modelId: item.id }).then((res) => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      });
    };
    // 屏蔽dianji
    let shieldListClick = (item, index) => {
      item.pingbiboxCheck = true;
      let newdatas = {};
      newdatas.id = item.id;
      newdatas.index = index + 1;

      getcomplaint(true, newdatas);
    };
    let shanchu = (activeItem) => {
      if (data.versionList.length == 0) {
        modealdel({ id: activeItem.id }).then((res) => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          data.page = 0;
          data.isOver = false;
          data.blocks = [];
          getinfo();
        });
        return;
      }

      var nums = 0;
      data.versionList.forEach((item, index) => {
        modealdel({ id: item.id }).then((res) => {
          nums++;
          if (nums == data.versionList.length) {
            ElMessage({
              type: "success",
              message: "删除成功",
            });
            data.page = 0;
            data.isOver = false;
            data.blocks = [];
            getinfo();
          }
        });
      });
    };
    // 查询版本
    let getdetailslist = (id) => {
      getdetails({ id: id }).then((res) => {
        let datasban = res.data;
        datasban.sort((a, b) => a.id - b.id);
        // 打印排序后的数组
        data.versionList = datasban;
      });
    };
    // 获取更多图片
    let getMoreImg = () => {
      // console.log(props.userType,'use')

      if (props.userType == 1) {
        getinfo();
      } else if (props.userType == 3) {
        getlikelist();
      } else if (props.userType == 4) {
        collectlistget();
      } else {
        getmyImg();
      }
    };
    // 关闭弹窗
    let opentypeclick = () => {
      data.opentype = false;
    };
    let sourcecheck = (val, type) => {
      let typeval;
      if (type == 0) {
        software.find((item) => {
          if (item.value == val) {
            typeval = item.text;
          }
        });
      } else {
        kindList.find((item) => {
          if (item.value == val) {
            typeval = item.text;
          }
        });
      }
      return typeval;
    };
    // 更多
    let more = () => {
      data.pingbiCheck = true;
    };
    // 举报列表点击
    let jubaoLICK = (item, index) => {
      if (index == 0) {
        let url = "https://i-desai.com/#/detailInfo?id=" + item.id;
        copyData(url);
      } else if (index == 1) {
        item.pngbiCheck = true;
      } else if (index == 2) {
        data.dialogVisibleTS = true;
        data.modelIdJB = item.id;
      }
    };
    // 获取列表
    let getmyImg = () => {
      // showLoading();
      if (props.searchinput == true) {
        data.blocks = [];
      }
      if (!data.isOver) {
        data.page += 1;
      } else {
        console.log("123123");
        return;
      }
      data.isLoading = true;
      searchList({
        phone: userInfo.value.userId || "",
        page: data.page,
        limit: data.limit,
        title: props.searchinput == true ? searchinput.value : "",
        type: data.titleCheck ? -1 : props.objsearch.searchType,
        checkPoint:
          props.objsearch.searchType == 1 ? props.objsearch.moxingzhonglei : -1,
        aa: props.objsearch.dimoxuanze, // 底模
        ckpt: props.objsearch.checkponiecurrent, //  拓展
        source: props.objsearch.moxingzhonglei,
        prompt: props.objsearch.checkponiecurrent,
        categoryId: props.objsearch.AdvancedsearchList || [],
        sort: props.objsearch.sortid, // 时间排序
        startTime: props.objsearch.timeid,
        isPrompt: props.objsearch.isPrompt, // 提示词
        haModel: props.objsearch.haModel, // 提示词
      }).then((res) => {
        data.isLoading = false;
        data.titleCheck = false;
        let datalist = res.data.records;
        data.isOver = datalist.length < data.limit;
        if (datalist.length == 0) {
          // waterfall.value.wrapperHeight = 0;
          data.isOver = true;
          data.blocks = [];
          datalist = [];
          data.page = 0;
          // hideLoading();
          return;
        }
        datalist.forEach((item) => {
          if (item.data[0] && item.type == 0) {
            item.url = item.data[0].url;
          } else {
            item.url = item.indexImgs.data[0].url || "";
          }
          item.pngbiCheck = false;
          item.pingbiboxCheck = false;
        });
        if (res.data.records) {
          if (data.page == 1) data.blocks = [];
          data.blocks = data.blocks.concat(datalist);
          data.blocks = [...data.blocks];
        } else {
          data.isOver = true;
        }
        // hideLoading();
      });
    };
    // 收藏成功回调
    let successcollct = (val) => {
      if (val.type == 1) {
        data.blocks.forEach((ites, indes) => {
          if (ites.id == val.modelId) {
            ites.collect = 1;
          }
        });
      } else {
        data.blocks.forEach((ites, indes) => {
          if (ites.id == val.modelId) {
            ites.collect = 0;
          }
        });
      }
    };
    // 获取我的创作
    let getinfo = () => {
      if (!data.isOver) {
        data.page += 1;
      } else {
        return;
      }
      data.isLoading = true;
      getdetailinfo({
        page: data.page,
        limit: data.limit,
        phone: data.types == 1 ? userInfo.value.userId : data.phone || "",
        isExamines: data.types == 0 ? [1] : [0, 1],
      }).then((res) => {
        // data.totals = res.data.total

        data.isLoading = false;
        let datalist = res.data.records;
        data.isOver = datalist.length < data.limit;
        datalist.forEach((item) => {
          if (item.data[0] && item.type == 0) {
            item.url = item.data[0].url;
          } else {
            item.url = item.indexImgs.data ? item.indexImgs.data[0].url : "";
          }
        });
        emit("totals", res.data.total);

        if (res.data.records) {
          if (data.page == 1) data.blocks = [];
          data.blocks = data.blocks.concat(datalist);
          data.blocks = [...data.blocks];
        } else {
          data.isOver = true;
        }
      });
    };
    // 获取我的喜欢列表
    let getlikelist = () => {
      if (!data.isOver) {
        data.page += 1;
      } else {
        return;
      }
      data.isLoading = true;
      likelist({
        page: data.page,
        limit: data.limit,
        phone: data.types == 1 ? userInfo.value.userId : data.phone || "",
      }).then((res) => {
        data.isLoading = false;
        let datalist = res.data.records;
        data.isOver = datalist.length < data.limit;
        datalist.forEach((item) => {
          if (item.data[0] && item.type == 0) {
            item.url = item.data[0].url;
          } else {
            item.url = item.indexImgs.data ? item.indexImgs.data[0].url : "";
          }
        });

        if (res.data.records) {
          if (data.page == 1) data.blocks = [];
          data.blocks = data.blocks.concat(datalist);
          data.blocks = [...data.blocks];
        } else {
          data.isOver = true;
        }
      });
    };
    // 打开页面
    let blocksCLick = (item) => {
      if (item.isExamine == 0) {
        return ElMessage.warning("正在审核中");
      }
      let id = item.id;
      // window.open({ path: "/detailInfo"});

      if (props.userType) {
        router.push({
          path: "/detailInfo",
          query: { id: id },
        });
        // emit("suiji");
        // props.objsearch.sortid = 5
        // getmyImg()
      } else {
        // let routeData = router.resolve({
        //   path: "/detailInfo",
        //   query: { id: id },
        // });
        // window.open(routeData.href, "_blank");

        router.push({
          path: "/detailInfo",
          query: { id: id },
        });
      }

      // emit("clickdrawer");
      //   data.drawer = true;
    };

    // 添加加载更多数据的方法
    const loadMore = () => {
      console.log("加载更多数据...");
      // 在这里添加你的数据加载逻辑
    };
    onMounted(async () => {
      waterfall.value.reRender();
      // waterfall.value.wrapperWidth = 0
      // 根据屏幕分辨率显示数量
      // if (width < 1820) {
      //   data.limit = 30;
      // } else if (width > 2000) {
      //   data.limit = 40;
      // }
      // if (width < 1240) {
      //   data.colWidth = 280;
      // }
      // if (width > 1240 && width < 1490) {
      //   data.colWidth = 220;
      // }
      // if (width > 1900 && width < 2200) {
      //   data.colWidth = 300;
      // }

      // getdetailslist()
      // const height = window.screen.height;

      // console.log(width);
      // console.log(height);

      // data.scrollContainer =scrollContainer.value
      // console.log(searchinput.value);
      data.scrollContainer = waterfall.value.scrollBodySelector;
      // waterfall.value.wrapperWidth = 0
      // console.log(waterfall.value);
      data.types = router.currentRoute._value.query.id;

      if (
        router.currentRoute.value.name == "home" ||
        router.currentRoute.value.name == "detailInfo"
      ) {
        data.biaoType = 0;
      } else {
        data.biaoType = 1;
      }
      if (data.types == 0) {
        data.phone = router.currentRoute._value.query.phone;
      }
      data.isMounted = true;
      if (props.userType == 4) {
        data.collectid = router.currentRoute._value.query.collectlistid;
      }
      // getMoreImg();
      data.advanceditemlist = classification;
      // 首页进入 不传userType 则加载时请求全部
      // if (props.userType === "") {
      // getMoreImg();
      // }
      //
    });
    let shenhe = (val) => {
      let value;
      if (val == 0) {
        value = "正在审核中";
      } else if (val == 3) {
        value = "审核拒绝";
      }
      return value;
    };
    // 喜欢
    let getlike = (item) => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      like({ id: item.id }).then((res) => {
        ElMessage.success("点赞成功");

        let datas = {};
        datas.id = item.id; // id
        datas.type = item.type; // 类型
        datas.userId = item.createId; // 作者id

        data.blocks.forEach((ites, indes) => {
          if (ites.id == item.id) {
            ites.like = 1;
          }
        });
        // getmyImg();
      });
    };

    // 取消点赞
    let quxiaodianzan = (item) => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      deletelike({ id: item.id }).then((res) => {
        ElMessage.success("取消成功");
        // data.page--;
        data.blocks.forEach((ites, indes) => {
          if (ites.id == item.id) {
            ites.like = 0;
          }
        });
        // getmyImg();
      });
    };
    let addshoucan = () => {
      data.dialogVisible = true;
      data.adddialogVisible = false;
    };

    // 收藏
    let getcollect = (item) => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      data.dialogVisible = true;
      data.opentype = true;
      data.googlistitem = item.id;
      data.shoucanID = item.createId;
    };
    let close = () => {
      data.dialogVisible = false;
      data.adddialogVisible = false;
    };
    // 取消收藏
    let quxiaoCollect = (item) => {
      if (!userInfo.value) return ElMessage.warning("请先登录");

      // data.opentype = true;
      // data.quxiaoCheck = true;
      // console.log(item.id);
      // data.googlistitem = item.id;
      collects._value.getdeleteCollect(item.id);
    };
    // 编辑
    let bianji = (id) => {
      router.push({
        path: "/uploadModel",
        query: { id: id.id, isExamine: id.isExamine },
      });
    };
    // 模型图库
    let imagetuku = () => {
      if (!data.isOver) {
        data.page += 1;
      } else {
        return;
      }
      moxintuku({
        page: data.page,
        limit: data.limit,
        id: data.types,
      }).then((res) => {
        data.isLoading = false;
        data.titleCheck = false;
        let datalist = res.data.records;
        data.isOver = datalist.length < data.limit;
        datalist.forEach((item) => {
          if (item.data[0] && item.type == 0) {
            item.url = item.data[0].url;
          } else {
            item.url = item.indexImgs.data[0].url || "";
          }
        });
        if (res.data.records) {
          if (data.page == 1) data.blocks = [];
          data.blocks = data.blocks.concat(datalist);
          data.blocks = [...data.blocks];
        } else {
          data.isOver = true;
        }
        hideLoading();
      });
    };
    let handleClose = () => {
      data.dialogVisibleTS = false;
    };
    // 投诉
    let TSConfig = () => {
      data.dialogVisibleTS = false;
      let newdatas = {};
      newdatas.yuanying = data.yuanying;
      newdatas.id = data.modelIdJB;
      newdatas.index = data.radio1TS;

      getcomplaint(false, newdatas);
    };
    // 投诉隐藏
    let getcomplaint = (typeleixing, newdatas) => {
      let datas = {};
      if (typeleixing) {
        datas.modelId = newdatas.id;
        datas.reason = newdatas.index;
        datas.type = 1;
      } else {
        datas.modelId = newdatas.id;
        datas.reason = newdatas.index;
        datas.detail = newdatas.yuanying;
        datas.type = 0;
      }

      complaint({ ...datas }).then((res) => {
        if (typeleixing) {
          ElMessage({
            type: "success",
            message: "屏蔽成功",
          });
        } else {
          ElMessage({
            type: "success",
            message: "举报成功,请等待审核",
          });
        }
      });
    };
    onUnmounted(() => {});
    onActivated(() => {
      router.beforeEach((to, from, next) => {
        if (from.name == "searchNew") {
          waterfall.value.reRender();

          data.page = 0;
          data.isOver = false;
          data.blocks = [];
          getmyImg();
        }
        next();
      });
    });
    return {
      getcomplaint,
      TSConfig,
      handleClose,
      shieldListClick,
      quxiaopingbi,
      jubaoLICK,
      imagetuku,
      bianji,
      getinfo,
      shanchu,
      delmoxingClick,
      delmoxing,
      collectlistget,
      more,
      collects,
      quxiaoCollect,
      successcollct,
      opentypeclick,
      close,
      getcollect,
      addshoucan,
      getlikelist,
      quxiaodianzan,
      getlike,
      searchinput,
      sourceser,
      userInfo,
      shenhe,
      sourcecheck,
      getMoreImg,
      blocksCLick,
      scrollContainer,
      handleScroll,
      loadMore,
      waterfall,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
::v-deep .el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: #ecf8fa;
  color: #64c8dc;
}
.TSButton {
  margin-top: 20px;
  width: 80px;
  height: 40px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #ffffff;
}
.pingbibox {
  position: absolute;
  bottom: 0;
  width: 180px;
  right: 0;
  z-index: 10;
  height: 140px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
}
.TSinput {
  width: 440px;
  height: 80px;
  background: #f7f9fa;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  > textarea {
    width: 100%;
    height: 100%;
    border: none;
    background: #f7f9fa;
    padding: 10px;
    border-radius: 10px;
  }
}
.dujiang {
  position: absolute;
  top: 14px;
  right: 10px;
  z-index: 10;
  .dujiaitem {
    width: 36px;
    height: 46px;
  }
}
.buttonlist {
  justify-content: flex-end;
  .quxiao {
    width: 80px;
    height: 40px;
    background: #f3f4f5;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #656f79;
    }
  }
  .queren {
    margin-left: 10px;
    width: 80px;
    height: 40px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
  }
}
::v-deep .el-radio {
  margin-right: 29px;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #64c8dc;
  border-color: #64c8dc;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #64c8dc;
}
.demo-image__lazy {
  // overflow-y: scroll ;
}
.waterfall {
  height: 100%;
  width: 100%;
}
.my-img-box {
  // background-color: red;
  // height: 500px;
  // overflow: hidden auto;
  // height: 100%;
  // overflow-y: scroll;
  // height: 100% !important;
}

.item-container {
  position: relative;
}
.noshenhe {
  position: relative;
  z-index: 10;
}
.imgss {
  border-radius: 20px;
  width: 100%;
}
.item {
  position: relative;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 10px;
  .neirong {
    padding: 0 10px;
    .content_title {
      margin-top: 10px;
      margin-bottom: 10px;
      > img {
        border-radius: 20px;

        width: 16px;
        height: 16px;
      }
      > span {
        display: block;
        width: 200px;
        overflow: hidden;
        word-break: break-all;
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
    }
    .shuju {
      // margin-right: 10px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
        &:last-child {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
          margin-left: 6px;
        }
      }
      > img {
        cursor: pointer;
        margin-left: 11px;
        width: 16px;
        height: 16px;
      }
    }
  }
  .titleimg_new {
    margin-left: 5px;
    width: 16px;
    height: 16px;
  }
  .pucontent {
    > span {
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
  }
  .titleimg {
    position: absolute;
    top: 0;
    z-index: 10;
    .title {
      margin-top: 12px;
      .titleItem {
        padding: 0 5px;
        height: 20px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        margin-left: 10px;
        > span {
          margin-left: 3px;
          display: block;
          text-align: center;
          line-height: 20px;
          display: block;
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
  .svgxinbiao {
    position: absolute;
    left: 37px;
    top: 28px;
    z-index: 10;
  }
  .pingbioverlay {
    padding: 20px;
    z-index: 99;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    backdrop-filter: blur(14px); //毛玻璃属性
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
    .liyou {
      flex-wrap: wrap;
      .liyouitem {
        margin-top: 10px;
        width: 100px;
        height: 30px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #ffffff;
        > span {
          font-size: 12px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
        &:nth-child(2n) {
          margin-left: 10px;
        }
      }
    }
    .quxiaoButton {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
  }
  .overlay {
    z-index: 99;
    opacity: 0;
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 100%;
    .userimg {
      padding: 10px 0;
      width: 100%;
      position: absolute;
      bottom: 0;
      // > img {
      //   margin-left: 10px;
      //   border-radius: 50%;
      //   width: 30px;
      //   height: 30px;
      // }
      .gongneng {
        .gognitem {
          cursor: pointer;
          margin-right: 10px;
          width: 30px;
          height: 30px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 8px 8px 8px 8px;
          > img {
            width: 16px;
            height: 16px;
          }
          &:active {
            opacity: 0.7;
          }
        }
      }
    }
  }
}
.item:hover .overlay {
  z-index: 99;
  opacity: 1;
  border-radius: 20px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(62%, transparent),
    color-stop(63.94%, rgba(0, 0, 0, 0.00345888)),
    color-stop(65.89%, rgba(0, 0, 0, 0.014204)),
    color-stop(67.83%, rgba(0, 0, 0, 0.0326639)),
    color-stop(69.78%, rgba(0, 0, 0, 0.0589645)),
    color-stop(71.72%, rgba(0, 0, 0, 0.0927099)),
    color-stop(73.67%, rgba(0, 0, 0, 0.132754)),
    color-stop(75.61%, rgba(0, 0, 0, 0.177076)),
    color-stop(77.56%, rgba(0, 0, 0, 0.222924)),
    color-stop(79.5%, rgba(0, 0, 0, 0.267246)),
    color-stop(81.44%, rgba(0, 0, 0, 0.30729)),
    color-stop(83.39%, rgba(0, 0, 0, 0.341035)),
    color-stop(85.33%, rgba(0, 0, 0, 0.367336)),
    color-stop(87.28%, rgba(0, 0, 0, 0.385796)),
    color-stop(89.22%, rgba(0, 0, 0, 0.396541)),
    color-stop(91.17%, rgba(0, 0, 0, 0.4))
  );
  background: linear-gradient(
    180deg,
    transparent 62%,
    rgba(0, 0, 0, 0.00345888) 63.94%,
    rgba(0, 0, 0, 0.014204) 65.89%,
    rgba(0, 0, 0, 0.0326639) 67.83%,
    rgba(0, 0, 0, 0.0589645) 69.78%,
    rgba(0, 0, 0, 0.0927099) 71.72%,
    rgba(0, 0, 0, 0.132754) 73.67%,
    rgba(0, 0, 0, 0.177076) 75.61%,
    rgba(0, 0, 0, 0.222924) 77.56%,
    rgba(0, 0, 0, 0.267246) 79.5%,
    rgba(0, 0, 0, 0.30729) 81.44%,
    rgba(0, 0, 0, 0.341035) 83.39%,
    rgba(0, 0, 0, 0.367336) 85.33%,
    rgba(0, 0, 0, 0.385796) 87.28%,
    rgba(0, 0, 0, 0.396541) 89.22%,
    rgba(0, 0, 0, 0.4) 91.17%
  );
}
textarea:focus {
  outline: none;
  border: 1px solid #64c8dc;
}
/* 滚动条整体样式 */
textarea::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条滑块样式 */
textarea::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
textarea::-webkit-scrollbar-track {
  background-color: #f7f9fa;
  height: 80% !important;
}

/* 鼠标悬停时滚动条轨道样式 */
textarea::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
textarea {
  resize: none;
}
</style>
